<template>
  <div>
  <!-- 数据窗口 -->
  <u-dialog :title="title" :show.sync="show" width="1040px" :auto-close="false" :footer="true" @cancel="cancel" @confirm="confirm">

    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="100px">
      <el-row>
        <el-form-item prop="contractNumber" label="合同编号">
          <el-col :span="10">
            <el-input v-model="dataForm.contractNumber" placeholder="" clearable />
          </el-col>
          <el-col :span="4" style="padding-top: 2px;padding-left: 12px">
            <el-button type="text" @click="handleDeductList">[扣款选择]</el-button>
          </el-col>
        </el-form-item>
        <el-form-item prop="deductionNumber" label="扣款代码">
          <el-input v-model="dataForm.deductionNumber" placeholder="" disabled clearable />
        </el-form-item>
        <el-form-item prop="deductionName" label="扣款名称">
          <el-input v-model="dataForm.deductionName" placeholder="" disabled clearable />
        </el-form-item>
        <el-form-item prop="overdueFineStandard" label="滞纳金标准">
          <el-input v-model="dataForm.overdueFineStandard" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="缴款时间" prop="paymentTime" >
          <el-date-picker v-model="dataForm.paymentTime" width="170" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" clearable />
        </el-form-item>
      </el-row>
    </el-form>
  </u-dialog>
    <el-drawer
      title="合同扣款信息"
      :visible.sync="deductListable"
      direction="rtl"
      size="40%"
    >
      <u-table
        :data="deductList"
        :options="listOptions"
        :columns="deductListcolumns"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="getDeduct(row)">选择</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </el-drawer>
  </div>
</template>

<script>
/**
 * 业务组件 - 合并操作
 */
export default {
  name: 'HolidayInfo',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({
          contractNumber: '',
          deductionNumber: ''
        })
      }
    }
  },
  data() {
    return {
      api: this.$u.api.OpcenHoliday,
      title: '季度滞纳金创建',
      dataForm: {},
      rules: {
        contractNumer: [
          { required: true, message: '请填写合同编号', trigger: ['blur'] }
        ],
        deductionNumer: [
          { required: true, message: '请填写扣款代码', trigger: ['blur'] }
        ],
        paymentTime: [
          { required: true, message: '请选择缴费时间', trigger: ['change'] }
        ]
      },
      listQuery: {
        type: 1,
        pageSize: 20,
        totalCount: 1,
        contractNum: ''
      },
      deductListable: false,
      deductList: [],
      listOptions: {
        mutiSelect: true,
        stripe: true
      },
      deductListcolumns: [
        {
          prop: 'deductionName',
          label: '扣款名称'
        },
        {
          prop: 'deductionNumber',
          label: '扣款代码'
        }
      ]
    }
  },
  watch: {
    show(newVal) {
      // 监听是否弹框,决定是否初始化数据
      // console.log(newVal + '---------------' + oldVal)
      if (newVal) {
        // 清除表单验证状态
        const self = this
        // 将数据带入
        self.dataForm = Object.assign({}, this.data)
        // 初始化数据源
        // self.dataForm = {
        //   contractNum: '',
        //   deductionNum: '',
        //   deductionName: '',
        //   overdueFineStandardopenid: '',
        //   paymentTime: ''
        // }
        self.$nextTick(() => {
          self.$refs['dataForm'].clearValidate()
        })
      }
    }
  },
  methods: {
    // 弹窗
    handleDeductList() {
      const self = this
      if (self.dataForm.contractNumber === '') {
        self.$u.msg('请填写合同编号！')
        return
      }
      self.listQuery.contractNum = self.dataForm.contractNumber
      // 查询出扣款信息
      self.api.querydedeuctlist(self.listQuery).then(res => {
        // 获取分页列表数据
        self.deductList = res.data.data
        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
      this.deductListable = true
    },
    // 选择扣款
    getDeduct(row) {
      const self = this
      self.dataForm.deductionNumber = row.deductionNumber
      self.dataForm.deductionName = row.deductionName
      this.deductListable = false
    },
    // 确认
    confirm() {
      const self = this
      self.$refs['dataForm'].validate((valid) => {
        if (valid) {
          self.$confirm('确定录入该数据？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
            self.api.saveQuarterHoliday(self.dataForm).then(() => {
              // 通知信息
              self.$u.msg('保存成功')
              // 双向绑定数据
              self.$emit('changeShow', false)
              // 更新成功后传递
              self.$emit('change')
            })
          }).catch(() => {
          })
        }
      })
      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>
